<template>
  <div class="JNPF-common-layout" style="min-height: 650px;">
    <div class="JNPF-preview-main">

      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label="参观点名称" prop="visitname">
                <el-input :disabled="pageType=='detail'" v-model="dataForm.visitname" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="参观点类型" prop="visittype">
                <JNPFTreeSelect :disabled="pageType=='detail'" v-model="dataForm.visittype" placeholder="请选择" clearable :options="visittypeOptions"
                  :props="visittypeProps">

                </JNPFTreeSelect>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="参观点介绍" prop="introduce">
                <el-input  :disabled="pageType=='detail'" v-model="dataForm.introduce" placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                  :autosize='{"minRows":4,"maxRows":4}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="参观点图片" prop="filejson">
                <JNPF-UploadImg :disabled="pageType=='detail'" v-model="dataForm.filejson" :fileSize="5" sizeUnit="MB" :limit="9">

                </JNPF-UploadImg>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="参观点联系人" prop="contactsman">
                <user-select :disabled="pageType=='detail'" v-model="dataForm.contactsman" placeholder="请选择" clearable>

                </user-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系电话" prop="contactsmobile">
                <el-input :disabled="pageType=='detail'" v-model="dataForm.contactsmobile" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
          </template>
          <div class="JNPF-common-page-header" style="border: none;">
            <div class="options">
              <el-button @click="goBack">关闭</el-button>
              <el-button v-if="pageType!='detail'" type="primary" @click="dataFormSubmit()"> 保 存</el-button>
            </div>
          </div>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'

  export default {
    components: {},
    props: [],
    data() {
      return {
        loading: false,
        dataForm: {
          planid: '',
          visitname: '',
          visittype: "",
          introduce: '',
          filejson: [],
          contactsman: '',
          contactsmobile: '',
        },

        rules: {
          visitname: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }, ],
          visittype: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }, ],
          contactsman: [{
            required: true,
            message: '请选择',
            trigger: 'click'
          }, ],
          contactsmobile: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }, ],
        },
        visittypeOptions: [],
        visittypeProps: {
          "children": "children",
          "label": "fullName",
          "value": "id"
        },
        pageData: null,
        pageType:''
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getvisittypeOptions();
    },
    mounted() {},
    methods: {
      getvisittypeOptions() {
        getDictionaryDataSelector('424622776159051909').then(res => {
          this.visittypeOptions = res.data.list
        })
      },
      goBack() {
        this.$emit('refresh')
      },
      init(row,type) {
        this.dataForm.planid = row.id;
        this.pageData = row
        this.pageType=type
        request({
          url: `/api/example/BusVisitspot/detail/${row.id}`,
          method: 'get',
        }).then((res) => {
          if (res.code == 200 && res.data) {
            res.data.filejson=JSON.parse(res.data.filejson)
            this.dataForm = res.data;
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            var _data = this.dataList()
            if (this.pageData.taskcount == 1) {
              // 编辑
              request({
                url: `/api/example/BusVisitspot/${this.dataForm.id}`,
                method: 'put',
                data: _data
              }).then((res) => {
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.$emit('refresh', true)
                  }
                })
              })
            } else {
              // 添加

              request({
                url: `/api/example/BusVisitspot`,
                method: 'post',
                data: _data
              }).then((res) => {
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.$emit('refresh', true)
                  }
                })
              })
            }
          }
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
        this.init()
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        _data.filejson = JSON.stringify(_data.filejson)
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        _dataAll.filejson = JSON.parse(_dataAll.filejson)
        this.dataForm = _dataAll
      },
    },
  }

</script>
